<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>detailsPage</title>
</head>

<body>
    <!-- 头部导航 -->
    <nav id="product">
        <ul class="head">
            <li>您好，欢迎来到泰康保险商城</li>
            <li>官方客服：<span>4008895512转2（企业客户转3 </span></li>
        </ul>
    </nav>
    <!-- 主题搜索 -->
    <div id="sear">
        <p class="logo"><img src="./image/logo.png" alt=""></p>
        <div class="searproduct">
            <input type="text" placeholder="E生平安·百万医 " id="inordersList">
            <button id="searchOrders">搜索</button>
        </div>
        <p class="lopg-left"><img src="https://baoxian.pingan.com/pa18shopnst/nstShop/img/qiandao.bb55bde2.png" alt="">
        </p>
        <ul class="product">
            <li>首页</li>
            <li>产品中心</li>
            <li>客户服务</li>
            <li>泰康招聘</li>
        </ul>
    </div>
    <!-- 图片插播 -->
    <p id="photo"></p>
    <!-- 保险信息 -->
    <p class="information"></p>
    <!-- 保险详情 -->
    <div class="particulars">
    </div>
    <!-- 标签切换 -->
    <div class="navTab">
        <div class="navTab-title">
            <div class="navList current">保障计划<span class="triangle"></span>
            </div>
            <div class="navList">产品特色<span></span>
            </div>
            <div class="navList">投保须知<span></span>
            </div>
            <div class="navList">常见问题<span></span>
            </div>
        </div>
        <div class="navTab-content">
            <!-- 保障计划 -->
            <section class="ntc accord">
                <div class="planNav" style="background-color: #fff8f5;">
                    <div class="plantitle bcolor">保障计划</div>
                    <div class="plantitle">保障详情解读</div>
                </div>
                <div class="planContent">
                    <section class="plantxt hid" id="planTxtOne">
                        <div style="background-color: #fff8f5;" class="picone">
                            <img src="./image/QQ图片20220805161144.png" alt="">
                        </div>
                        <span style=" width: 116px;" class="instruct">隐私保护说明</span>
                        <p>您提供的个人信息、数据和隐私我们不会提供给任何未获授权的第三方。</p>
                    </section>
                    <section class="plantxt" id="planTxtOne">
                        <div style="background-color: #fff8f5;" class="picone">
                            <img src="./image/QQ图片20220805161824.png" alt="">
                        </div>
                        <span style=" width: 116px;" class="instruct">隐私保护说明</span>
                        <p>您提供的个人信息、数据和隐私我们不会提供给任何未获授权的第三方。</p>
                    </section>
                </div>
            </section>
            <!-- 产品特色 -->
            <section class="ntc ">
                <img src="https://baoxian.pingan.com/uploadfile/clause/image/website/1656309189892.jpg"
                    class="contenttwopic">
            </section>
            <!-- 投保须知 -->
            <section class="ntc" style="background-color: #fff8f5;">
                <img src="./image/QQ图片20220805162011.png" alt="">
            </section>
            <!-- 常见问题 -->
            <section class="ntc ">
                <img src="./image/QQ图片20220805162134.png" alt="">
            </section>
        </div>
    </div>
    <!-- 下面部分 -->
    <div class="way">
        <img src="./image/QQ图片20220805162513.png" alt="">
    </div>
    <div class="way">
        <img src="./image/QQ图片20220805162811.png" alt="">
    </div>










    <!-- 标签切换js -->
    <script>
        // 选项卡
        var navTab = document.querySelectorAll('.navList');
        var navTabContent = document.querySelectorAll('.ntc')
        for (var i = 0; i < navTab.length; i++) {
            navTab[i].onclick = function (e) {
                var navl = e.target
                for (var i = 0; i < navTab.length; i++) {
                    if (navTab[i] == navl) {
                        navTab[i].className = 'current'
                        navTab[i].children[0].className = "triangle"
                        navTabContent[i].className = 'accord'
                    } else {
                        console.log(navTab[i].children[0]);
                        navTab[i].children[0].className = ''
                        navTab[i].className = '';
                        navTabContent[i].className = ''

                    }

                }
            }
        }

        // 内部选项卡
        var plantitle = document.querySelectorAll('.plantitle');
        var plantxt = document.querySelectorAll('.plantxt')
        for (var i = 0; i < plantitle.length; i++) {
            plantitle[i].onclick = function (e) {
                var plt = e.target
                for (var i = 0; i < plantitle.length; i++) {
                    if (plantitle[i] == plt) {
                        plantitle[i].className = 'bcolor'

                        plantxt[i].className = 'hid'
                    } else {
                        plantitle[i].className = '';
                        plantxt[i].className = ''
                    }

                }
            }
        }
    </script>

</body>

</html>